import React, { Component } from 'react'
import ReactDOM from 'react-dom'

export default class App extends Component {
  state = {
   username: 'xxx',
   content:'',
   frame:'vue',
   sex:'male'
  }
 
  HandleInput = (e) =>{
    this.setState({
      username:e.target.value
    })
  }
  HandleTextArea = (e) =>{
    this.setState({
      content:e.target.value
    })
  }
  HandleSelect = (e) =>{
    this.setState({
      frame:e.target.value
    })
  }
  HandleRadio =(e) =>{
    this.setState({
      sex:e.target.value
    })
  }
  render () {
    return (
      <ul>
        <li>
          <label hemlfor='username'>用户名</label>
          <input id='username' type='text' value={this.state.username} onChange={this.HandleInput}></input>
        </li>
        <li>
          <label hemlfor='content'>其他信息</label>
          <textarea id='content' type='text' value={this.state.content} onChange={this.HandleTextArea}
          cols='30'
          rows='10'
          ></textarea>
        </li>
        <li>
          <label hemlfor='frame'>框架</label>
          <select id='frame' value={this.state.frame} onChange={this.HandleSelect}>
            <option value='react'>React</option>
            <option value='vue'>Vue</option>
            <option value='angular'>Angular</option>
          </select>
        </li>
        <li>
          <input type='radio' id='male' value='male' checked={this.state.sex === 'male'} onChange={this.HandleRadio}></input>
          <label hemlfor='male'>男</label>

          <input type='radio' id='female' value='female' checked={this.state.sex === 'female'} onChange={this.HandleRadio}></input>
          <label hemlfor='female'>女</label>

          <input type='radio' id='unkonw' value='unkonw' checked={this.state.sex === 'unkonw'} onChange={this.HandleRadio}></input>
          <label hemlfor='unkonw'>未知</label>
        </li>
      </ul>
    )
  }
}

ReactDOM.render(<App />, document.querySelector('#react'))